<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            display: inline-block;
        }

        #search {
            width: 545px;
            height: 42px;
            border-color: #4E6EF2;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            float: left;
        }

        #btn {
            width: 108px;
            height: 42px;
            background-color: #4e6ef2;
            color: #fff;
            border: none;
            font-size: 17px;
            font-weight: 400;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            float: left;
        }

        #show {
            width: 545px;
            border: 1px solid #4e6ef2;
            position: relative;
            left: -55px;
            text-align: left;
        }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<center>
    <img alt="" width="310" height="150" src="baidu.jpg"><br/>
    <div id="box">
        <input id="search" type="text" name="search" value=""/>
        <button id="btn">百度一下</button>
    </div>
    <div id="show">

    </div>
</center>
</body>
</html>
<script>
    //给输入框一个内容改变事件
    $("#search").keyup(function () {
        //获取value值
        var value = $(this).val();
        //value不为空
        if(value != null && value.trim() != "") {

            $.post("homework01Servlet",{username:value,mark:"dimQuery"},function (obj) {

                console.log(obj);
                var str = "";
                for (var i = 0; i < obj.length; i++) {
                    str += "<div>" + obj[i].username + "</div>";
                }
                $("#show").html(str);
            },"json")
        }else {
            //清空
            $("#show").html("");
        }
    })
</script>